<template>
	<view class="tab">
		<view v-for="(item, index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
			<image class="tab_img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{color: currentIndex === index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';

	const list = ref([]);
	const currentIndex = ref(0);
	const color = ref('#959595');
	const selectedColor = ref('#333333');

	let props = defineProps({
		selectedIndex: {
			default: 0
		}
	})

	watch(() => props.selectedIndex, (newIndex) => {
		currentIndex.value = newIndex;
	});

	onMounted(() => {
		currentIndex.value = props.selectedIndex;
		list.value = [{
				"pagePath": "/pages/qishoudingdan/qishoudingdan",
				"iconPath": "https://zjdemo.xuande.work:8889/photo/14332837676641f89f1cfed1850d95f6.png",
				"selectedIconPath": "https://zjdemo.xuande.work:8889/photo/d852049ce3dd443aaa30678ca92dda05.png",
				"text": "订单"
			},
			{
				"pagePath": "/pages/myqishou/myqishou",
				"iconPath": "https://zjdemo.xuande.work:8889/photo/ab194d1c05a94159a88ab1296b7ded1f.png",
				"selectedIconPath": "https://zjdemo.xuande.work:8889/photo/0e6187323c7d4e4cba9dfadb998a17b5.png",
				"text": "我的"
			}
		];
	});

	const switchTab = (item, index) => {
		currentIndex.value = index;
		uni.redirectTo({
			url: item.pagePath,
		});
	};
</script>

<style lang="scss" scoped>
	.tab {
		height: 103px;
		position: fixed;
		// bottom:-25px;
		bottom: 0px;

		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);

		.tab-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 45rpx;
				height: 45rpx;
			}

			.tab_text {
				font-size: 25rpx;
				margin: 9rpx 0;
			}
		}
	}
</style>